<template>
  <div v-global-loading="loading">
    <div class="box" style="display: flex">
      <div
        class="left"
        style="
          margin-left: 20px;
          width: 420px;
          border-right: 1px solid #999;
          padding-right: 50px;
          overflow-y: scroll;
          height: 600px;
          padding-left: 30px;
          padding-top: 20px;
        "
      >
        <a-timeline>
          <a-timeline-item color="green" v-for="(item, index) in flowNodes">
            <template #dot>
              <img
                src="@/assets/imgs/maxavacer.png"
                alt=""
                style="width: 50px; height: 50px"
              />
            </template>
            <div style="margin: 0px 0 0 10px; display: flex">
              <span>{{ item.nodeName }}&nbsp;&nbsp;</span>
              <div
                class="btn"
                style="background-color: #169bd5"
                v-if="item.nodeType === 0"
              >
                发起
              </div>
              <div
                class="btn"
                style="background-color: #169bd5"
                v-else-if="index < statusIndex || parameter.applyStatus == 9"
              >
                审批通过
              </div>
              <div
                class="btn"
                style="background-color: #169bd5"
                v-else-if="index == statusIndex"
              >
                审批中
              </div>
              <div
                class="btn"
                style="background-color: #aaaaaa"
                v-else-if="index > statusIndex"
              >
                待审核
              </div>
            </div>
            <div
              style="
                margin-left: 10px;
                margin-bottom: 50px;
                display: flex;
                flex-wrap: wrap;
              "
            >
              <span>{{ item.markers }}</span>
              <span style="margin-left: 20px" v-if="index == 0">
                {{
                  dayjs(item.createdTime).format("YYYY-MM-DD HH: mm: ss")
                }}</span
              >
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
      <div
        class="right"
        ref="right"
        style="
          padding-left: 10px;
          width: 450px;
          overflow-y: scroll;
          height: 600px;
        "
      >
        <div v-for="item in histories" style="margin-bottom: 50px">
          <div
            style="
              display: flex;
              justify-content: space-between;
              padding-right: 50px;
            "
          >
            <div>
              <img
                src="@/assets/imgs/maxavacer.png"
                alt=""
                style="width: 20px; height: 20px"
              />
              <span style="margin-left: 20px">{{ item.nodeName }}</span>
            </div>
            <p>{{ item.createdTime }}</p>
          </div>
          <p style="text-indent: 2em">
            {{ item.remark1 }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a :href="item.url" v-if="item.url" target="_blank"
              >点击查看附件信息</a
            >
          </p>
        </div>
      </div>
    </div>
    <template v-if="parameter.examine">
      <div style="display: flex; margin-top: 10px; margin-bottom: 10px">
        <span style="width: 100px">输入意见：</span>
        <a-textarea v-model:value="formData.remark1" placeholder="请输入" />
      </div>
      <div class="footer" style="display: flex; justify-content: space-between">
        <div style="display: flex">
          <a :href="formData.url" v-if="formData.url" target="_blank"
            >点击查看附件信息</a
          >
          <span
            style="color: red; cursor: pointer; margin-left: 5px"
            v-if="formData.url"
            @click="formData.url = ''"
            >删除</span
          >
          <!-- <div
            class="commonBtn-primary"
            style="margin-left: 10px"
            @click="upLoad"
          >
            附件上传
          </div> -->
        </div>
        <div style="display: flex">
          <div
            class="commonBtn-primary"
            style="margin-right: 10px"
            @click="examination(1)"
          >
            审批通过
          </div>
          <div
            class="commonBtn-primary"
            style="margin-right: 10px"
            @click="examination(3)"
          >
            驳回
          </div>
          <div
            class="commonBtn-primary"
            style="margin-right: 10px"
            @click="examination(2)"
          >
            退回
          </div>
        </div>
      </div>
    </template>
    <a-modal
      width="500px"
      v-if="showModal1"
      v-model:open="showModal1"
      title="选择回退节点"
      :maskClosable="false"
      @ok="okNodeId"
    >
      <span style="width: 100px">请选择退回节点:</span>
      <a-select style="width: 200px" v-model:value="formData.nodeId">
        <a-select-option
          :value="item.value"
          v-for="(item, index) in sendBack"
          :key="index"
          :title="item.label"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
import {message} from "ant-design-vue";
import {
  getFlowNodes,
  queryHistories,
  getNewFlowOperationHistory,
  flowFlowNode
} from "@/api/common";
import {trigerUpload} from "@/utils/common";
// import { UpLoadFile } from '@/api/common'
import dayjs from "dayjs";
const props: any = defineProps({
  //审批流参数
  parameter: {
    type: Object,
    id: 0, //id
    approvalFlowId: null, //审批流ID
    applyStatus: null, //状态
    examine: true //是否显示审批按钮
  }
});
const parameter = computed({
  get() {
    return props.parameter;
  },
  set() {}
});
//需要返回的数据
const formData: any = ref({});
const statusIndex = ref();
const nodeId = ref("");
const showModal1 = ref(false);
const emits = defineEmits(["ok"]);
const loading = ref(false);
//审批
function examination(data) {
  if (!formData.value.remark1) {
    if (data == 1) {
      formData.value.remark1 = "通过";
    } else if (data == 2) {
      formData.value.remark1 = "退回";
    } else if (data == 3) {
      formData.value.remark1 = "不同意";
    }
  }
  if (data == 1) {
    formData.value.type = 1;
    formData.value.nodeId = nodeId.value;
    loading.value = true;
    formData.value.remark =
      formData.value.remark1 + "$^&!@$^&#^&**$#(.*)$" + formData.value.url;
    emits("ok", formData.value);
  } else if (data == 2) {
    formData.value.type = 2;
    formData.value.nodeId = null;
    showModal1.value = true;
  } else if (data == 3) {
    formData.value.nodeId = nodeId.value;
    formData.value.type = 3;
    loading.value = true;
    formData.value.remark =
      formData.value.remark1 + "$^&!@$^&#^&**$#(.*)$" + formData.value.url;
    emits("ok", formData.value);
  }
}
function okNodeId() {
  if (formData.value.nodeId) {
    showModal1.value = false;
    loading.value = true;
    formData.value.remark =
      formData.value.remark1 + "$^&!@$^&#^&**$#(.*)$" + formData.value.url;
    emits("ok", formData.value);
  } else {
    message.error("请选择需要退回的节点!");
  }
}
//流程
const flowNodes: any = ref([]);
const sendBack: any = ref([]);
//意见
const histories: any = ref([]);
async function showModal() {
  formData.value = {
    remark: "",
    nodeId: null,
    approvalFlowId: props.parameter.approvalFlowId,
    id: props.parameter.id,
    type: 1,
    remark1: "",
    url: ""
  };
  loading.value = true;
  try {
    let historiesRes = await queryHistories({
      id: parameter.value.approvalFlowId
    }); //审批备注
    let flowNodesRes = await getFlowNodes({id: parameter.value.approvalFlowId}); //整个流程
    let nodeIdRes = await flowFlowNode({id: parameter.value.approvalFlowId}); //当前节点
    let sendBackRes = await getNewFlowOperationHistory({
      id: parameter.value.approvalFlowId
    }); //可退回节点
    //格式化备注信息 分割出备注信息里面的URL
    histories.value = historiesRes.data;
    histories.value.forEach((item) => {
      if (item.content) {
        let data = item.content.split("$^&!@$^&#^&**$#(.*)$");
        if (data[1]) {
          item.url = data[1];
        }
        item.remark1 = data[0];
      }
    });
    //判断出当前审批到哪一步
    flowNodes.value = flowNodesRes.data;
    formData.value.nodeId = nodeIdRes.data;
    nodeId.value = nodeIdRes.data;
    if (formData.value.nodeId) {
      flowNodes.value.forEach((item, index) => {
        if (item.nodeId == formData.value.nodeId) {
          statusIndex.value = index;
        }
      });
    }
    //可退回审批节点了列表
    sendBack.value = sendBackRes.data;
  } finally {
    loading.value = false;
  }
}
// showModal()
function nodeModal() {
  loading.value = false;
}
const upLoad = () => {
  //   trigerUpload().then(res => {
  //     loading.value = true
  //     let files = res.target.files[0]
  //     let formData1 = new FormData();
  //     formData1.append("file", files);
  //     UpLoadFile(formData1).then(res => {
  //       formData.value.url = res.data
  //       loading.value = false
  //     }).catch(err => {
  //       loading.value = false
  //     })
  //   })
};
defineExpose({
  showModal,
  nodeModal,
  loading
});
</script>
<style lang="less" scoped>
.btn {
  padding: 2px 5px;
  color: #fff;
  border-radius: 20px;
}

.ok {
  width: 60px;
  height: 25px;
  color: #fff;
  text-align: center;
  line-height: 25px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #169bd5;
  margin-left: 10px;
}
</style>
